<template>
    <div>
        <h3>样式绑定</h3>
        <p :class="{'active':isActive, 'text-danger':isDanger}">样式1</p>
        <p :class="classObj">样式2</p>
        <p :class="[arrActive, arrHasError]">样式3</p>
        <p :class="[isActive?'active':'', arrHasError]">样式4</p>
        <p :class="[isActive?'active':'', classObj]">样式5</p>
        <p :class="[isActive?'active':'', {'text-danger': hasWarn}]">样式6</p>

        <p :style="{color:activeColor, fontSize: fontSize+'px'}">Style样式1</p>
        <p :style="styleObj">Style样式2-对象样式</p>
        <p :style="[styleObj]">Style样式3-对象数组样式</p>
    </div>
</template>

<script>


export default {
    data () {
        return {
            isActive: false,
            isDanger: false,
            hasWarn: true,
            classObj:{
                'active':true, 
                'text-danger':true
            },
            arrActive: "active",
            arrHasError: "text-danger",
            activeColor: 'blue',
            fontSize: 30,
            styleObj: {
                color: 'green'
            }
        }
    }
}
</script>
<style>
.active{
    font-size: 30px;
    color: burlywood;
}
.text-danger{
    color: red;
}
</style>